*{
  margin: 0;
  padding: 0;
}
.p-l-1{
  padding-left: 6px;
}
.p-l-2{
  padding-left: 12px;
}
.p-l-3{
  padding-left: 18px;
}
.p-l-4{
  padding-left: 24px;
}
.p-r-1{
  padding-right: 6px;
}
.p-r-2{
  padding-right: 12px;
}
.p-r-3{
  padding-right: 18px;
}
.p-r-4{
  padding-right: 24px;
}
.p-t-1{
  padding-top:6px;
}
.p-t-2{
  padding-top:12px;
}
.p-t-3{
  padding-top:18px;
}
.p-t-4{
  padding-top:24px;
}
.p-b-1{
  padding-bottom: 6px;
}
.p-b-2{
  padding-bottom: 12px;
}
.p-b-3{
  padding-bottom: 18px;
}
.p-b-4{
  padding-bottom: 24px;
}
.p-1{
  padding: 6px;
}
.p-2{
  padding: 12px;
}
.p-3{
  padding:18px;
}
.p-4{
  padding: 24px;
}

.m-1{
  margin: 6px;
}
.m-2{
  margin: 12px;
}
.m-3{
  margin: 18px;
}
.m-4{
  margin: 24px;
}
.m-b-1{
  margin-bottom: 6px;
}
.m-b-2{
  margin-bottom: 12px;
}
.m-b-3{
  margin-bottom: 18px;
}
.m-b-4{
  margin-bottom: 24px;
}
/**
垂直居中（定义到子元素）
 */
.v-center{
  display: inline-block;
  vertical-align: middle;
}
/**
通过伪元素实现垂直居中（定义到父级）
 */
.b-center::before{
  content: '';
  display: inline-block;
  vertical-align: middle;
  height: 100%;
}

.h-100{
  height: 100%;
}

.p-relative{
  position: relative;
}
.o-hid{
  overflow: hidden;
}
.o-y-auto{
  overflow-y: auto;
}
.text-left{
  text-align: left;
}
.text-right{
  text-align: right;
}
.text-center{
  text-align: center;
}
.flex-between{
  justify-content: space-between;
}
.flex-1{
  flex: 1;
}
